layui.use(['layer','element','jquery','laypage'],function() {
    layer = layui.layer;
    element = layui.element;
    $ = layui.jquery,
    laypage = layui.laypage;
    // setInterval(request,5000);
    request()
    function request() {
        var param = {
            'app':'gateway',
            'desc':true,
            'pageIndex':1,
            'pageSize':10
        };
        $.getJSON(contextRoot+"metric/queryTopResourceMetric.json",param,function (result) {

            if (result.code==0){
                $("#content").empty();
                $("#page").empty();
                var data = result.data;
                if (data) {
                    laypage.render({
                        elem: 'page'
                        , curr: data.pageIndex
                        , count: data.totalCount //数据总数
                        // ,count: 2 //数据总数
                        , limit: data.pageSize
                        , layout: ['count', 'prev', 'page', 'next']
                        , jump: function (obj) {
                        }
                    });

                    if (data.totalCount > 0) {
                        loadDatas(data.metric)
                    }
                }

            }
        });
    }

    function loadDatas(metrics) {
        for (var i in metrics){
            loadData(i,metrics[i])
        }
    }

    function loadData(name,datas){
        var parse = praseData(datas);
        var html = "<div class=\"layui-col-sm12 layui-col-md12\">\n" +
            "            <div class=\"layui-card\">\n" +
            "                <div class=\"layui-card-header\" style=\"background-color: #C0C0C0\">"+name+"</div>\n" +
            "                <div class=\"layui-card-body\" style=\"min-height: 280px;\">\n" +
            "                    <div class=\"layui-col-md6\">\n" +
            "                        <div class='echart' style='height: 280px;width: 100%;'></div>" +
            "                    </div>\n" +
            "                    <div class=\"layui-col-md6\" style=\"height: 280px;overflow: auto\">\n" + parse.table
            "                    </div>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "        </div>";
        $("#content").append(html);

        var myChart = echarts.init($(".echart")[0]);
        myChart.setOption(getEchartOption(parse.xData,parse.paseQps,parse.blockQps));

    }

    function formatTimestamp(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var Y = date.getFullYear() + '-';
        // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        // var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = (date.getMinutes() < 10 ? '0'  + date.getMinutes() : date.getMinutes()) + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        return h+m+s;
    }
    
    function praseData(datas) {
        var xData=[];
        var paseQps=[];
        var blockQps=[];
        var table = " <table class=\"layui-table\"><thead> <tr><th>请求时间</th><th>通过Qps</th><th>阻塞Qps</th><th>成功Qps</th><th>异常Qps</th><th>响应时间</th></tr> </thead> <tbody>";
        for (var i in datas){
            var time = datas[i].timestamp;
            table += "<tr><td>"+formatTimestamp(time)+"</td><td>"+datas[i].passQps+"</td><td>"+datas[i].blockQps+"</td><td>"+datas[i].successQps+"</td><td>"+datas[i].exceptionQps+"</td><td>"+datas[i].rt+"</td></tr>";
            xData.push(time);
            paseQps.push(datas[i].passQps);
            blockQps.push(datas[i].blockQps);
        }
        table += "</tbody></table>";
        return {"table":table,"xData":xData,"paseQps":paseQps,"blockQps":blockQps};
    }

    function getEchartOption(xData,paseQps,blockQps) {
        var colors = ['#1af326', '#d11913'];
        return {
            color: colors,

            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data:['通过Qps', '阻塞Qps']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    // axisLine: {
                    //     onZero: false,
                    //     lineStyle: {
                    //         color: colors[1]
                    //     }
                    // },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return params.seriesData[0].data;
                            }
                        }
                    },
                    data: xData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '通过Qps',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    data: paseQps
                },
                {
                    name: '阻塞Qps',
                    type: 'line',
                    smooth: true,
                    data: blockQps
                }
            ]
        };
    }
});

